<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A标签作为按钮的样式</title>
<script type="text/javascript" src="../../js/jquery-1.2.6.js"></script>
<style>
	a{
		text-decoration: none;		
		font: 12px/1.125 Arial,Helvetica,sans-serif;
	}
	
	li{
		margin-top:10px;
	}
	
	.first{
		background-color: #84d500;
		font:#000;
		border: 1px #84d500 solid;
		display:inline-block;
		width:60px;
		height:24px;
		line-height: 24px;
		text-align: center;
		vertical-align: middle;
	}
	
	.second{
		background-image:url(btn.png);
		background-position:0 0px;
		background-color: #ccc;
		display:inline-block;
		height:24px;
		width:40px;
		text-align: center;
		line-height: 24px;
	}
	
	.second span{
		background-image: url(btn.png);
		background-position: right -24px;
		display:inline-block;
		height:24px;
		width:60px;
		text-align: center;
		line-height: 24px;
		margin-left: 2px;
	}
</style>
</head>

<body>
<h2>Demo1横向切换模式</h2>
	<div id="slider1">
		<ul>				
			<li>
				<a class="first" href="javascript:void(0);">添加</a> 当前使用
			</li>
			<li>
				<a class="second" href="javascript:void(0);"><span>删除</span></a>
			</li>
			<li><a href="javascript:void(0);"></a></li>
			<li><a href="javascript:void(0);"></a></li>
			<li><a href="javascript:void(0);"></a></li>			
		</ul>
	</div>

</body>
</html>
